<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap</title>
		<%@ include file="headcfg.jsp" %>
		<style type="text/css">
		#main{width: auto;}
		#left,#right,#togglebar{float:left;overflow: hidden;}
		.navbar{margin-bottom: 0px;}
		#content{
			background-color: red;
			width: 100%;
			clear: both;
		}
		#togglebar{width: 5px;}
		</style>
	</head>
	<body>
		<div id="main">
				<div id="header"  class="navbar navbar-default" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-navbar">
					      <span class="sr-only">Toggle navigation</span>
					      <span class="icon-bar"></span>
					      <span class="icon-bar"></span>
					      <span class="icon-bar"></span>
					    </button>
						<a class="navbar-brand" href="#">CrazyRunner</a>
					</div>
					
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="top-navbar" >
					  <ul class="nav navbar-nav">
					    <li class="active"><a href="#">工作面板 Dashboard</a></li>
					    <li><a href="#">系统设置</a></li>
					    <li class="dropdown">
					      <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他 <b class="caret"></b></a>
					      <ul class="dropdown-menu">
					        <li><a href="#">Action</a></li>
					        <li><a href="#">Another action</a></li>
					        <li><a href="#">Something else here</a></li>
					        <li class="divider"></li>
					        <li><a href="#">Separated link</a></li>
					        <li class="divider"></li>
					        <li><a href="#">One more separated link</a></li>
					      </ul>
					    </li>
					  </ul>
					 
					  <ul class="nav navbar-nav navbar-right">
					    <li><a href="#">Link</a></li>
					    <li class="dropdown">
					      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
					      <ul class="dropdown-menu">
					        <li><a href="#">Action</a></li>
					        <li><a href="#">Another action</a></li>
					        <li><a href="#">Something else here</a></li>
					        <li class="divider"></li>
					        <li><a href="#">Separated link</a></li>
					      </ul>
					    </li>
					  </ul>
					</div><!-- /.navbar-collapse -->
			</div>
		
		
			<div id="content" >
				<div id="left" >
					<iframe id="leftFrame" style="overflow: visible;" scrolling="yes" frameborder="no" width="100%" height="100%" 
						src="${ctx }/menu/menuList?menuId=1"></iframe>
				</div>
				<div id="togglebar"></div>
				<div id="right" style="background-color: #AFAFAF;">
					<iframe id="mainFrame" style="overflow: visible;" scrolling="yes" frameborder="no" width="100%" height="100%" src="leftmenu.jsp"></iframe>
				</div>
			</div>
		</div>
	
	
	
	
	
	
	
	
	
	
	
	
    </body>
<script type="text/javascript">
function window_resize(){
	var minHeight = 540 ,minWidth = 980;
	var winHeight = $(window).height();
	var winWidth  = $(window).width ();
	var headerHeight = $('#header').height();
	var currentHeight = (winHeight<minHeight?minHeight:winHeight)-headerHeight-5;
	var currentWidth  = winWidth <minWidth ?minWidth-10:winWidth;
	$('#left').width(180).height(currentHeight);
	$('#right').width(currentWidth - 180 -5).height(currentHeight);
	$('#togglebar').height(currentHeight);
	if(winWidth<minWidth){
		$("#main").css("width",minWidth-10);
		$("html,body").css({"overflow":"auto","overflow-x":"auto","overflow-y":"auto"});
	}else{
		$("#main").css("width","auto");
		$("html,body").css({"overflow":"hidden","overflow-x":"hidden","overflow-y":"hidden"});
	}
}
$(document).ready(window_resize);
$(window).resize(window_resize);

</script>
</html>
